<template>
  <div class="divColor" style="width: 100%; height: 500px">
    <div>
      <van-popup :show=show position="bottom">
        <van-area title="地点" :area-list="areaList" @cancel="cancelAddress()" @confirm="confirmAddress"/>
      </van-popup>
    </div><!---->
    <!--    第一行---搜索框-->
    <div class="divTop">
      <van-row>
        <van-col offset="1" span="1">
          <van-icon @click="dingWei" class="whiteColor" size="20px" name="map-marked"/>
        </van-col>
        <van-col @click="dingWei" span="11"><label class="whiteColor">{{ nowAddress }}</label></van-col>
        <van-col offset="8" span="3">
          <van-icon @click="messageView" name="chat-o" color="white" size="20px"/>
        </van-col>
      </van-row>
      <van-search shape="round" background="rgb(234,191,100)" placeholder="麻辣兔头" @click="searchView"/>
    </div>
    <!--    第二行---文本-->
    <div style="background-color: white; width: 90%; height: 50px; margin-left: 5%"></div>
    <van-row style="margin-top: 5px">
      <van-col span="7" class="whiteColor">
        <van-icon color="white" name="logistics"/>
        <label style="font-size: 1px;">最快9分钟送达</label>
      </van-col>
      <van-col span="7" class="whiteColor">
        <van-icon color="white" name="logistics"/>
        <label style="font-size: 1px;">满5元免配送费</label>
      </van-col>
      <van-col span="10" class="whiteColor">
        <van-icon color="white" name="logistics"/>
        <label style="font-size: 1px;">客服电话:101033365</label>
      </van-col>
    </van-row>
    <!--    第三行---宫格-->
    <div class="whiteColor">
      <van-grid :border="false" icon-size="43px" :column-num="5"
                style="width:90%; margin-left: 5%; margin-top: 10px">
        <van-grid-item @click="vegetables"
                       icon="https://img0.baidu.com/it/u=466028124,1840953982&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1656954000&t=ea2a2fefd988575421d8cb92465a5833"
                       text="蔬菜"/>
        <van-grid-item
            icon="https://img0.baidu.com/it/u=2547492829,762738924&fm=253&fmt=auto&app=138&f=JPEG?w=613&h=500"
            text="肉类"/>
        <van-grid-item
            icon="https://img1.baidu.com/it/u=2282203152,3094073111&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=372"
            text="海鲜"/>
        <van-grid-item
            icon="https://img1.baidu.com/it/u=3813004339,4064910189&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            text="水果"/>
        <van-grid-item
            icon="https://img0.baidu.com/it/u=1224807766,2547767681&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500"
            text="奶制品"/>
        <van-grid-item
            icon="https://img2.baidu.com/it/u=1715926307,1691945201&fm=253&fmt=auto&app=120&f=JPEG?w=624&h=389"
            text="鸡蛋"/>
        <van-grid-item
            icon="https://img2.baidu.com/it/u=3096929758,1961432816&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
            text="火锅"/>
        <van-grid-item icon="https://img2.baidu.com/it/u=2622658543,4152130&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                       text="油"/>
        <van-grid-item
            icon="https://img1.baidu.com/it/u=2924919055,1061708435&fm=253&fmt=auto&app=138&f=JPEG?w=660&h=495"
            text="酒类"/>
        <van-grid-item
            icon="https://img1.baidu.com/it/u=3004744726,1198789045&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334"
            text="小龙虾"/>
      </van-grid>
    </div>
    <div class="divFloat1">
      <van-row>
        <van-col>
          <label style="float: left; font-size: 5px">限时抢购</label>
          <van-count-down :time="time" style="float: left">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </van-col>
      </van-row>
      <van-row>
        <van-col>
          每日特价疯抢
        </van-col>
      </van-row>
      <van-row>
        <van-col>
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image
                  src="https://img2.baidu.com/it/u=1543578988,3589910464&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                  src="https://img1.baidu.com/it/u=1821824829,1521120265&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              />
            </van-grid-item>
          </van-grid>
        </van-col>
      </van-row>
      <van-row>
        <van-col offset="2" span="8" style="margin-top: -5px">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
        <van-col offset="3" span="8" style="margin-top: -5px">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
      </van-row>
      <van-row style="margin-top: 10px">
        <van-col offset="1">
          <label style="float: left; font-size: 14px">叮咚菜场</label></van-col>
      </van-row>
      <van-row>
        <van-col offset="1" style="font-size: 5px">
          爆款食材&nbsp;&nbsp;新鲜到家
        </van-col>
      </van-row>
      <van-row>
        <van-col>
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image
                  src="https://img2.baidu.com/it/u=51291611,1432681411&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                  src="https://img2.baidu.com/it/u=117148256,1794272733&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=457"
              />
            </van-grid-item>
          </van-grid>
        </van-col>
      </van-row>
      <van-row>
        <van-col offset="2" span="8" style="margin-top: -5px">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
        <van-col offset="3" span="8" style="margin-top: -5px">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
      </van-row>
    </div>
    <div class="divFloat2">
      <van-row>
        <van-col>
          <label style="float: left; font-size: 5px">叮咚新品</label>

        </van-col>
      </van-row>
      <van-row>
        <van-col style="margin-top: 5px">
          脐橙上市啦！
        </van-col>
      </van-row>
      <van-row>
        <van-col>
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image
                  src="https://img0.baidu.com/it/u=296247154,879821094&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                  src="https://img1.baidu.com/it/u=3647737807,2052915227&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
              />
            </van-grid-item>
          </van-grid>
        </van-col>
      </van-row>
      <van-row style="margin-top: -4px">
        <van-col offset="2" span="8">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
        <van-col offset="3" span="8">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
      </van-row>
      <van-row style="margin-top: 12px">
        <van-col offset="2">
          <label style="float: left; font-size: 14px">绿卡会员</label>
        </van-col>
        <van-col offset="3" span="9">
          <label style="float: left; font-size: 14px">叮咚鱼塘</label>
        </van-col>
      </van-row>
      <van-row>
        <van-col offset="2" style="font-size: 5px; ">
          免费领菜
        </van-col>
        <van-col offset="4" style="font-size: 5px;">
          0元领活鱼
        </van-col>
      </van-row>
      <van-row>
        <van-col>
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image
                  src="https://img2.baidu.com/it/u=217462911,2349443202&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                  src="https://img0.baidu.com/it/u=1496375331,1154426486&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=397"
              />
            </van-grid-item>
          </van-grid>
        </van-col>
      </van-row>
      <van-row>
        <van-col offset="2" span="8">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
        <van-col offset="4" span="8">
          <van-button round color="orange" size="mini" text="￥9.8"></van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import AreaInfo from '../assets/area.js'

export default {
  name: "FirstView",
  data() {
    return {
      show: false,
      nowAddress: "请选择所在地",
      time: 16 * 60 * 60 * 1000,
      showAddress: false,
      areaList: AreaInfo,
    }
  },
  methods: {
    cancelAddress() {
      this.show = false;
    },
    confirmAddress(val) {
      this.nowAddress = val[0].name + '-' + val[1].name + '-' + val[2].name;
      this.show = false;
    },
    dingWei() {
      this.show = true;
    },
    searchView() {
      //跳转到搜索页面
      this.$router.push("/search1")
    },
    messageView() {
      //跳转到消息页面
      this.$router.push("")
    },
    vegetables() {
      //  跳转到蔬菜页面
      this.$router.push("/sort")
    }
  }
}
</script>

<style scoped>
.divTop {
  padding-top: 20px;

}

.divColor {
  background-color: rgb(234, 191, 100);
  margin-bottom: 240px;
}

.whiteColor {
  color: white;
}

.divFloat1 {
  border-radius: 15px;
  background-color: white;
  margin-left: 5%;
  width: 45%;
  float: left;
  margin-top: 20px;
  padding-left: 4px;
  padding-top: 10px;
  height: 200px;
}

.divFloat2 {
  border-radius: 15px;
  background-color: white;
  margin-right: 4%;
  float: left;
  width: 43%;
  margin-top: 20px;
  padding-left: 4px;
  padding-top: 10px;
  height: 200px;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>